<template>
	<view>
		<view class="header">
			<image :src="equipments[id].imgUrl" mode=""></image>
			<view class="cn_name">
				{{ equipments[id].cn_name }}
			</view>
			<view class="en_name">
				{{ equipments[id].en_name }}
			</view>
		</view>

		<view class="title">
			<view class="hd">
				设备列表
			</view>
			<view class="bd">
				Equipment List
			</view>
		</view>

		<view class="equipment_list">
			<view class="equipment_item">
				<view class="icon">
					<view class="left">
						<image :src="equipments[id].imgUrl" mode=""></image>
						<view class="cn_name">
							{{ equipments[id].cn_name }}
						</view>
					</view>
					<view class="right">
						<view class="hd">
							农场一
						</view>
						<view class="status">
							关
						</view>
					</view>
				</view>
				<view class="control">
					<view class="process" ref="circles">
						<view class="mask">

						</view>
						<view class="circle current" @click="changestatus(1)"></view>
						<view class="circle" @click="changestatus(2)"></view>
						<view class="circle" @click="changestatus(3)"></view>
					</view>
					<view class="text">
						<view @click="changestatus(1)">关闭</view>
						<view @click="changestatus(2)">停止</view>
						<view @click="changestatus(3)">开启</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				equipments: [{
						id: 0,
						imgUrl: 'https://img1.baidu.com/it/u=964227239,4068268093&fm=253&fmt=auto&app=120&f=JPEG?w=996&h=560',
						cn_name: '喷淋设备',
						en_name: 'Spary Equipment'
					},
					{
						id: 1,
						imgUrl: 'https://img2.baidu.com/it/u=3874514604,2281212316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312',
						cn_name: '环流风机',
						en_name: 'Circulation Fan'
					},
					{
						id: 2,
						imgUrl: 'https://img0.baidu.com/it/u=3067527106,3185361569&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=335',
						cn_name: '照明设备',
						en_name: 'Lighting'
					},
					{
						id: 3,
						imgUrl: 'https://img0.baidu.com/it/u=3784915813,3672168700&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=372',
						cn_name: '大鹏设备',
						en_name: 'Film Rolling'
					},
					{
						id: 4,
						imgUrl: 'https://img1.baidu.com/it/u=964227239,4068268093&fm=253&fmt=auto&app=120&f=JPEG?w=996&h=560',
						cn_name: '遮阳设备',
						en_name: 'Sunshade Equipment'
					},
					{
						id: 5,
						imgUrl: 'https://img1.baidu.com/it/u=964227239,4068268093&fm=253&fmt=auto&app=120&f=JPEG?w=996&h=560',
						cn_name: '驱鸟器',
						en_name: 'Bird Scarer'
					},
				]
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		methods: {
			changestatus(num) {
				this.$refs.circles.$children[1].$el.classList.remove('current')
				this.$refs.circles.$children[2].$el.classList.remove('current')
				this.$refs.circles.$children[3].$el.classList.remove('current')
				this.$refs.circles.$children[num].$el.classList.add('current')
				const aaa = 'selected' + num
				this.$refs.circles.$children[0].$el.classList.remove('selected1')
				this.$refs.circles.$children[0].$el.classList.remove('selected2')
				this.$refs.circles.$children[0].$el.classList.remove('selected3')
				this.$refs.circles.$children[0].$el.classList.add(aaa)
			}
		}
	}
</script>

<style lang="less">
	.header {
		height: 250rpx;
		padding-top: 30rpx;
		text-align: center;
		color: #fff;
		background-color: #0070d9;
		box-sizing: border-box;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		.cn_name {
			margin-top: 10rpx;
			font-size: 36rpx;
			letter-spacing: 5rpx;
		}

		.en_name {
			margin-top: 10rpx;
			font-size: 28rpx;
		}
	}

	.title {
		margin-left: 25rpx;

		.hd {
			width: 160rpx;
			line-height: 70rpx;
			letter-spacing: 3rpx;
			text-align: center;
			font-size: 38rpx;
			border-bottom: 1px solid #333;
		}

		.bd {
			font-size: 26rpx;
			line-height: 50rpx;
			color: #999;
		}
	}

	.equipment_item {
		display: flex;
		margin: 10rpx 0;

		.icon {
			display: flex;
			width: 300rpx;
			height: 140rpx;
			padding-top: 10rpx;
			margin-left: 20rpx;
			box-sizing: border-box;
			text-align: center;
			box-shadow: 0 1px 2px rgb(150, 150, 150, .3);
			border-radius: 10rpx;

			.left {
				flex: 1;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.cn_name {
					font-size: 28rpx;
					margin-top: 5rpx;
				}
			}

			.right {
				flex: 1;
				margin-top: 20rpx;

				.hd {
					font-size: 36rpx;
					color: #999;
				}

				.status {
					margin-top: 15rpx;
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		.control {
			margin: 50rpx 0 0 70rpx;

			.process {
				position: relative;
				display: flex;
				justify-content: space-between;
				width: 300rpx;
				height: 5rpx;
				background-color: #999;

				.mask {
					position: absolute;
					width: 0;
					height: 2px;
					background-color: #dd001b;
					transition: all .5s;

					&.selected1 {
						width: 0;
					}

					&.selected2 {
						width: 50%;
					}

					&.selected3 {
						width: 100%;
					}
				}

				.circle {
					position: relative;
					width: 14rpx;
					height: 14rpx;
					margin-top: -6rpx;
					background-color: #999;
					border-radius: 50%;

					&.current {
						transform: scale(1.5);
						background-color: #eb2202;
					}
				}
			}

			.text {
				display: flex;
				justify-content: space-between;
				width: 350rpx;
				margin-top: 10rpx;
				margin-left: -28rpx;
				font-size: 30rpx;
				color: #999;
			}
		}
	}
</style>
